<script setup lang="ts">
  import { Card as ACard } from 'ant-design-vue';
  import {
    BUILT_IN_THEME_PRESETS,
    usePreferences,
    updatePreferences,
    type BuiltinThemePreset,
  } from '@vben/preferences';

  import { MoonStar, Sun } from '@vben/icons';
  import { $t } from '@vben/locales';
  import { storeToRefs } from 'pinia';
  import { useDesktopStore } from '@vben/stores';

  const { isDark, theme, diffPreference } = usePreferences();
  const PRESETS = [
    {
      icon: Sun,
      name: 'light',
      title: $t('preferences.theme.light'),
    },
    {
      icon: MoonStar,
      name: 'dark',
      title: $t('preferences.theme.dark'),
    },
    // {
    //   icon: SunMoon,
    //   name: 'auto',
    //   title: $t('preferences.followSystem'),
    // },
  ];

  function _handleChange() {
    updatePreferences({
      theme: { mode: isDark.value ? 'light' : 'dark' },
    });
  }

  const { primaryColor } = storeToRefs(useDesktopStore());
  function handleUpdate(builtInTheme: BuiltinThemePreset) {
    primaryColor.value = builtInTheme.color;
    updatePreferences({
      theme: {
        colorPrimary: builtInTheme.color,
        builtinType: builtInTheme.type,
      },
    });
  }
</script>
<template>
  <div class="p-5">
    <a-card class="mb-5" title="主题">
      <div
        class="theme-item"
        :style="{ color: theme === item.name ? diffPreference?.theme?.colorPrimary : '' }"
        v-for="item in PRESETS"
        @click="_handleChange"
      >
        <component :is="item.icon" class="size-6" />
      </div>
    </a-card>
    <a-card title="内置主题">
      <div
        class="built-in-theme-item"
        v-for="item in BUILT_IN_THEME_PRESETS"
        :style="{
          background: item.color,
        }"
        @click="handleUpdate(item)"
      ></div>
    </a-card>
  </div>
</template>

<style scoped lang="less">
  .theme-item {
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
  }
  .built-in-theme-item {
    width: 40px;
    height: 40px;
    display: inline-block;
    margin-right: 10px;
    border-radius: 4px;
    cursor: pointer;
  }
</style>
